<template>
  <view>
    <view>
      <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000">
        <swiper-item>
          <view class="swiper-item">轮播A</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">轮播B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">轮播C</view>
        </swiper-item>
      </swiper>
    </view>

    <view class="card-content">
      <view class="card">
        <navigator url="/pages/index/index" open-type="switchTab">
          <view class="cube">首页</view>
        </navigator>
      </view>
      <view class="card">
        <navigator url="/pages/test/index" open-type="switchTab">
          <view class="cube">cell</view>
        </navigator>
      </view>
      <view class="card">
        <navigator url="/pages/test/index" open-type="switchTab">
          <view class="cube">cell</view>
        </navigator>
      </view>
      <view class="card">
        <navigator url="/pages/test/index" open-type="switchTab">
          <view class="cube">cell</view>
        </navigator>
      </view>
      <view class="card">
        <navigator url="/pages/user/index" open-type="switchTab">
          <view class="cube">我的</view>
        </navigator>
      </view>
    </view>

    <view class="content">
      <view>
        <view class="content-card">内容1</view>
        <view class="content-card">内容2</view>
        <view class="content-card">内容3</view>
        <view class="content-card">内容4</view>
      </view>
    </view>
  </view>
</template>

<script setup>


</script>

<style>

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  background-color: lightgray;
}

.card-content {
  padding: 0 30rpx 0 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cube {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25rpx;
  width: 120rpx;
  height: 120rpx;
  border: 1px solid lightgray;
  border-radius: 15rpx;
}

.content {
  margin: 20rpx 0 20rpx 0;
}

.content-card {
  width: 100%;
  height: 300rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  text-align: center;
  background-color: lightgray;
}
</style>
